<template>
  <!-- 项目实施 - 右上角tab3 - 处理意见 - content -->
  <div class="right-tab-con3">
    <div class="right-tab-con3-header">
      <div class="right-tab-con3-header-l">处理意见({{infos && infos.list && infos.list.length>0 ? infos.list.length : '0'}})  赞({{infos.header && infos.header.num1 ? infos.header.num1 : '0'}})</div>
      <div class="right-tab-con3-header-r">
        <el-checkbox v-model="checked">与我相关({{infos.header && infos.header.num2 ? infos.header.num2 : '0'}})</el-checkbox>
        <el-tooltip effect="dark" :content="showEmpty == false ? '显示空意见' : '隐藏空意见'" placement="top">
          <img v-if="showEmpty == false" :src="require('../../images/icon-form-modal-show.png')" width="16" @click="showEmpty = !showEmpty"></img>
          <img v-else :src="require('../../images/icon-form-modal-hide.png')" width="16" @click="showEmpty = !showEmpty"></img>
        </el-tooltip>
      </div>
    </div>
    <div v-if="showEmpty == false && infos && infos.list && infos.list.length>0" class="right-tab-con3-body">
      <div :class="replyBox == true && actCard == idxJ ? 'right-tab-con3-body-item act' : 'right-tab-con3-body-item'"  v-for="(j, idxJ) in infos.list" :key="idxJ">
        <div class="right-tab-con3-body-item-t">
          <div class="right-tab-con3-body-item-t-l">
            <div class="icon1">{{j.circleText}}</div>
            <span>{{j.name}}</span>
          </div>
          <span class="right-tab-con3-body-item-t-r"> {{j.opinion}} </span>
        </div>
        <div class="right-tab-con3-body-item-b">
          <span class="right-tab-con3-body-item-b-l"> {{j.dateTime}} </span>
          <div class="right-tab-con3-body-item-b-r">
            <img :src="require('../../images/icon-form-modal-7.png')" width="16" @click="toggleClickNum(idxJ)">
            <span>({{j.clickNum}})</span>
            <el-button type="text" @click="openReplyBox(idxJ)"> 回复 </el-button>
          </div>
        </div>
      </div>
      <div v-if="replyBox" class="reply-box">
        <div class="ipt">
          <el-input
            type="textarea"
            :rows="3"
            resize="none"
            :placeholder="placeHolder"
            v-model="textarea">
          </el-input>
          <div class="acts">
            <el-dropdown @command="showTip">
              <i class="el-dropdown-link el-icon-paperclip" style="cursor: pointer;"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :class="'more-img'+(idxI+1)" v-for="(i,idxI) in moreImgs" :key="idxI" :command="i.msg">
                  <img :src="i.path" width="16" class="vam">
                  <span> {{i.msg}} </span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-tooltip class="item" effect="dark" content="推送" placement="top">
              <img class="icon-img" :src="require('../../images/@.png')" width="18" @click="$message.info('推送')">
            </el-tooltip>
            <el-checkbox v-model="showOpinion">意见隐藏</el-checkbox>
          </div>
        </div>
        <div class="btns">
          <el-button type="primary" plain @click="$message.info('回复')"> 回复 </el-button>
          <el-button @click="replyBox = false"> 取消 </el-button>
        </div>
      </div>
    </div>
    <div v-else class="right-tab-con3-body empty">
      <img :src="require('../../images/empty-img.png')" width="80px" height="100px"/>
      <p class="right-tab-con3-text">无数据</p>
    </div>
    
    
    <!-- 点击关联文档 -->
    <el-dialog title="关联文档" class="document-modal" :visible.sync="docModalState" @close="docModalState=false;" width="90%" style="margin-top:0;" :close-on-click-modal="false" @before-close="beforeClose">
      <el-tabs class="docs" tab-position="top" v-model="docTopIdx">
        <el-tab-pane v-for="(i,idx) in docTabs" :key="idx" :name="i.v">
          <div slot="label">{{i.l}}</div>
        </el-tab-pane>
      </el-tabs>
      <div v-if="docTopIdx == '0'" class="doc-tab tab1">
        <docTab1 ref="docTab1"></docTab1>
      </div>
      <div v-if="docTopIdx == '1'" class="doc-tab tab2">
        <docTab2 ref="docTab2"></docTab2>
      </div>
      <div v-if="docTopIdx == '2'" class="doc-tab tab3">
        <docTab3 ref="docTab3"></docTab3>
      </div>
      <div v-if="docTopIdx == '3'" class="doc-tab tab4">
        <docTab4 ref="docTab4"></docTab4>
      </div>
      
      <span slot="footer" class="flow-modal-footer">
        <el-button @click="docModalState=false;">取 消</el-button>
        <el-button type="primary" @click="docModalState=false;">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import docTab1 from "../../components/docContent/synergy";
import docTab2 from "../../components/docContent/official";
import docTab3 from "../../components/docContent/docCenter";
import docTab4 from "../../components/docContent/meeting";
export default {
  name: "rightTabCon3",
  components: { docTab1, docTab2, docTab3, docTab4 },
  data() {
    return {
      infos: {},
      actCard: null,
      clickNum: '0',
      placeHolder: '',
      textarea: '',
      showOpinion: false, // 意见隐藏
      checked: false,
      showEmpty: false, // 显示空意见
      replyBox: false, // 回复窗口
      docModalState: false, // 关联文档弹窗
      docTopIdx: '0',
      docTabs: [
        {l: '协同', v: '0'},
        {l: '公文', v: '1'},
        {l: '文档中心', v: '2'},
        {l: '会议', v: '3'}
      ],
      moreImgs: [
        {
          msg: '上传附件',
          path: require('../../images/icon-upload.png'),
        },
        {
          msg: '关联文档',
          path: require('../../images/icon-connect-doc.png'),
        }
      ],
    }
  },
  props: {
    tabTitle: {
      type: String,
      default: () => ''
    },
    info: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    actCard(n) {},
    info: {
      handler(n, o) {
        if(n && n.length>0) {
          this.bgs = n[0];
        }
      },
      deep: true
    }
  },
  mounted() {
    setTimeout(() => {
      if(this.info && this.info.length>0) {
        this.infos = this.info[0];
      }
    }, 200)
  },
  methods: {
    /**
     * @author Wrl
     * 提示信息
     */
    showTip(msg) {
      if(msg == '关联文档') {
        this.docModalState = true;
        setTimeout(() => {
          document.querySelector('.v-modal').style.display = "none";
        }, 50)
      } else {
        this.$message.info(msg);
      }
    },
    /**
     * @author Wrl
     * 回复
     */
    openReplyBox(idx) {
      let userName = this.infos.list[idx].name;
      this.placeHolder = `回复 ${userName}`;
      this.actCard = idx;
      this.textarea = '';
      this.replyBox = true;
    },
    /**
     * @author Wrl
     * 点赞
     */
    toggleClickNum(idx) {
      if(this.infos.list[idx].clickNum == '0') {
        this.infos.list[idx].clickNum = '1';
      } else {
        this.infos.list[idx].clickNum = '0';
      }
    },
    /**
     * @author Wrl
     * 关闭前的回调
     */
    beforeClose() {
      this.$refs.docTab1.refresh();
      setTimeout(() => {
        this.docTopIdx = '0';
        this.docModalState = false;
      }, 100)
    },
    /**
     * @author Wrl
     * 关闭关联文档弹窗
     */
    closeDocModal() {
      this.docTopIdx = '0';
      this.docModalState = false;
    }
  }
}
</script>

<style lang="scss" scoped>
  .right-tab-con3 {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    // position: relative;
    &-header {
      height: 36px;
      width: calc(100% - 20px);
      padding: 0 12px 0 10px;
      background-color: rgba(17, 163, 137, 0.08);
      border-radius: 8px 8px 0 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      &-l {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
      }
      &-r {
        display: inline-flex;
        align-items: center;
        img {
          margin: 2px 0 0 5px;
        }
      }
    }
    &-body {
      width: 100%;
      height: calc(100% - 50px);
      position: relative;
      &.empty {
        text-align: center;
      }
      &-item {
        width: calc(100% - 20px);
        margin: 0 auto 10px;
        border: 0.5px solid #f0f0f0;
        border-radius: 2px;
        color: #333;
        padding: 12px;
        cursor: pointer;
        &:hover {
          border: 0.6px solid rgba(17, 163, 137, 0.08);
          background: rgba(17, 163, 137, 0.08);
          box-shadow: 0 0 8px 0 rgba(0, 0, 0, .04), 0 0 12px 0 rgba(0, 0, 0, .03);
        }
        &.act {
          border: 0.6px solid rgba(17, 163, 137, 0.08);
          background: rgba(17, 163, 137, 0.08);
          box-shadow: 0 0 8px 0 rgba(0, 0, 0, .04), 0 0 12px 0 rgba(0, 0, 0, .03);
        }
        &-t {
          display: flex;
          justify-content: space-between;
          align-items: center;
          &-l {
            display: inline-flex;
            justify-content: flex-start;
            align-items: center;
            .icon1 {
              color: #ffffff;
              background: #11a389;
              border-radius: 50%;
              margin-right: 10px;
              width: 40px;
              height: 40px;
              line-height: 40px;
              text-align: center;
            }
          }
          &-r {
            color: #666666;
            font-size: 12px;
            padding: 2px 5px;
            border-radius: 3px;
            background: #f5f5f5;
            img {
              margin-left: 10px;
            }
          }
        }
        &-b {
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
          color: #999999;
          &-l {
            font-size: 12px;
          }
          &-r {
            display: inline-flex;
            align-items: flex-end;
            justify-content: flex-end;
            img {
              cursor: pointer;
            }
            ::v-deep .el-button--text {
              margin-left: 10px;
              padding: 10px 0 0;
              font-size: 12px;
            }
          }
        }
      }
      .reply-box {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background: #f0f4f7;
        padding: 16px;
        animation: mymove 0.3s;
        -webkit-animation: mymove 0.3s;
        .ipt {
          padding: 5px 10px;
          background: #ffffff;
          border-radius: 3px;
          border: 1px solid #e9ebee;
          position: relative;
          ::v-deep {
            .el-textarea__inner {
              border: none;
              padding: 0;
              font-size: 12px;
              text-align: justify;
            }
          }
          .acts {
            padding: 5px 0;
            width: 100%;
            display: inline-flex;
            justify-content: flex-start;
            align-items: center;
            img {
              cursor: pointer;
            }
            i {
              font-size: 20px;
              color: #999;
              font-weight: bold;
            }
            .icon-img{
              margin: 0 8px;
              &:hover {
                width: 18px;
                content: url('../../images/@-act.png');
              }
            }
            ::v-deep {
              .el-checkbox__label {
                padding-left: 3px;
              }
            }
          }
        }
        .btns {
          margin-top: 10px;
          text-align: right;
        }
      }
    }
  }
  .vam {
    vertical-align: middle;
  }
  .more-img1:hover {
    img {
      content: url('../../images/icon-upload-act.png');
    }
  }
  .more-img2:hover {
    img {
      content: url('../../images/icon-connect-doc-act.png');
    }
  }
  ::v-deep {
    .document-modal .el-dialog__body {
      background: #ffffff !important;
      padding: 10px 20px !important;
    }
    .el-tabs--top {
      .el-tabs__nav-scroll {
        background: #ffffff !important;
        .el-tabs__nav.is-top {
          display: inline-flex;
          justify-content: space-around;
        }
      }
      .el-tabs__nav-wrap::after {
        background-color: #dfe4ed !important;
      }
      .el-tabs__item {
        padding: 0 20px;
        display: inline-block !important;
        &.is-active > div {
          width: 25%;
          border-bottom: 1px solid #11a983 !important;
        }
      }
    }
  }
  @keyframes mymove {
    from { bottom: -150px; }
    to { bottom: 0px; }
  }

  @-webkit-keyframes mymove {
    from { bottom: -150px; }
    to { bottom: 0px; }
  }
</style>